<template>
  <div class="back">
    <div class="header">
      <el-input v-model="searchUid" placeholder="搜索人员id " size="mini" clearable style="float: left; width: 15%; margin-right: 15px;" />
      <el-button type="primary" size="mini" @click="search">搜索</el-button>
      <el-button v-if="!isFull" size="mini" type="primary" icon="el-icon-arrow-left" style="float: right; margin-right: 5%;" @click="fullTable">完整列表</el-button>
      <!-- <el-button type="primary" size="mini" style="margin-right: 12px;" @click="handleClickAdd">添加+</el-button> -->
      <!-- <el-popover v-model="visible" placement="top" width="160">
        <p>确定删除选中的违规事件?</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="deleteViolations">确定</el-button>
        </div>
        <el-button slot="reference" type="primary" size="mini">删除-</el-button>
      </el-popover> -->
    </div>
    <!-- 列表 -->
    <div class="table">
      <el-table ref="multipleTable" :data="violations" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="60" />
        <el-table-column prop="violationType" label="违规种类" width="140" />
        <el-table-column prop="violationLocation" label="违规地点" width="120" />
        <el-table-column prop="violatorUid" label="违规人员ID" width="120" />
        <el-table-column label="违规时间" width="180">
          <template slot-scope="scope">{{ scope.row.violationDate }}</template>
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip />
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1" style="color: chartreuse;">已处理</span>
            <span v-if="scope.row.status === 0" style="color: red;">未处理</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <!-- <el-button type="text" size="small" @click="handleClickEdit(scope.row)">编辑</el-button> -->
            <el-button type="text" size="small" @click="handleClickCheck(scope.row)">查看</el-button>
            <span style="margin-left: 15px;" />
            <el-button type="text" size="small" @click="changeStatus(scope.row.id, scope.row.status)">修改状态</el-button>
            <!-- <el-dropdown>
              <span class="el-dropdown-link" style="font-size: x-small;">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="changeStatus(scope.row.id, scope.row.status)">修改状态</el-dropdown-item>
                <el-dropdown-item @click.native="deleteViolation(scope.row.id)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 信息查看表 -->
    <el-dialog title="查看" :visible.sync="isCheck" width="40%" :center="true" show-close>
      <div style="width: 100%;">
        <div class="check">ID: {{ checkForm.id }}</div>
        <div class="check">违规种类: {{ checkForm.violationType }}</div>
        <div class="check">违规地点: {{ checkForm.violationLocation }}</div>
        <div class="check">违规人员ID: {{ checkForm.violatorUid }}</div>
        <div class="check">违规时间: {{ checkForm.violationDate }}</div>
        <div class="check">违规描述: {{ checkForm.description }}</div>
        <div class="check">状态:
          <span v-if="checkForm.status === 1" style="color: chartreuse;">已处理</span>
          <span v-if="checkForm.status === 0" style="color: red;">未处理</span>
        </div>
      </div>
    </el-dialog>
    <!-- 新增表格 -->
    <!-- <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" label-width="80px">
        <el-form-item class="add" label="违规种类" :label-width="formLabelWidth">
          <el-input v-model="addForm.violationType" autocomplete="off" />
        </el-form-item>
        <el-form-item class="add" label="违规地点" :label-width="formLabelWidth">
          <el-input v-model="addForm.violationLocation" autocomplete="off" />
        </el-form-item>
        <el-form-item class="add" label="违规时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-form-item class="add">
              <el-date-picker v-model="addForm.violationDate" style="width: 219%;" type="datetime" placeholder="选择具体时间" value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item class="add" label="违规人员ID" :label-width="formLabelWidth">
          <el-input v-model="addForm.violatorUid" autocomplete="off" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="addForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="isAdd" type="primary" @click="addViolation">确 定</el-button>
        <el-button v-else type="primary" @click="editViolation">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page.sync="page"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="totalCount"
        style="text-align: center; margin-top: 20px"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 7,
      totalCount: 0,
      searchUid: null,
      dialogFormVisible: false,
      isCheck: false,
      formLabelWidth: '100px',
      visible: false,
      isAdd: true,
      isFull: true,
      multipleSelection: [],
      addForm: {
        violationType: '',
        violationLocation: '',
        violationDate: '',
        description: '',
        status: null,
        violatorUid: ''
      },
      checkForm: [],
      violations: [],
      isSearch: false
    }
  },
  watch: {
    page() {
      if (this.isSearch) {
        this.search()
      } else {
        this.getViolationRecordsList()
      }
    }
  },
  mounted() {
    this.getViolationRecordsList()
  },
  methods: {
    getViolationRecordsList() {
      this.axios.get(`http://139.9.77.245:8081/violation-records/${this.page}/${this.pageSize}`).then(res => {
        if (res.data.code === 0) {
          this.violations = res.data.data.records
          this.totalCount = res.data.data.total
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClickCheck(row) {
      this.checkForm = JSON.parse(JSON.stringify(row))
      this.isCheck = true
    },
    search() {
      if (this.searchUid !== '') {
        this.axios.get(`http://139.9.77.245:8081/violation-records/${this.page}/${this.pageSize}?violatorUid=${this.searchUid}`).then(res => {
          if (res.data.code === 0) {
            this.violations = res.data.data.records
            this.totalCount = res.data.data.total
            this.isFull = false
            this.isSearch = true
          }
        })
      }
    },
    fullTable() {
      this.page = 1
      this.searchUid = ''
      this.getViolationRecordsList()
      this.isFull = true
      this.isSearch = false
    },
    // handleClickEdit(row) {
    //   this.isAdd = false
    //   this.addForm = JSON.parse(JSON.stringify(row))
    //   this.dialogFormVisible = true
    // },
    // handleClickAdd() {
    //   this.isAdd = true
    //   this.addForm = {
    //     violationType: '',
    //     violationLocation: '',
    //     violationDate: '',
    //     description: '',
    //     status: '',
    //     violatorUid: ''
    //   }
    //   this.dialogFormVisible = true
    // },
    // addViolation() {
    //   this.addForm.status = 0
    //   this.axios.post('http://139.9.77.245:8081/violation-records', this.addForm).then(res => {
    //     if (res.data.code === 0) {
    //       this.getViolationRecordsList()
    //       this.$message.success('添加成功')
    //       this.dialogFormVisible = false
    //       this.addForm = {
    //         violationType: '',
    //         violationLocation: '',
    //         violationDate: '',
    //         description: '',
    //         status: '',
    //         violatorUid: ''
    //       }
    //     }
    //     if (res.data.code === 1) {
    //       this.$message.error('添加失败')
    //     }
    //   })
    // },
    // editViolation() {
    //   this.axios.put('http://139.9.77.245:8081/violation-records', this.addForm).then(res => {
    //     if (res.data.code === 0) {
    //       this.$message.success('修改成功')
    //       this.dialogFormVisible = false
    //       this.addForm = {
    //         id: null,
    //         violationType: '',
    //         violationLocation: '',
    //         violationDate: '',
    //         description: '',
    //         status: '',
    //         violatorUid: ''
    //       }
    //     }
    //     if (this.data.code === 1) {
    //       this.$message.error('修改失败')
    //     }
    //   })
    // },
    // deleteViolations() {
    //   const ids = []
    //   this.multipleSelection.forEach(violation => {
    //     ids.push(~~violation.id)
    //   })
    //   this.axios.delete('http://139.9.77.245:8081/violation-records', ids).then(res => {
    //     if (res.data.code === 0) {
    //       this.getViolationRecordsList()
    //       this.$message.success('删除成功')
    //     }
    //     if (res.data.code === 0) {
    //       this.$message.error('删除失败')
    //     }
    //   })
    //   this.visible = false
    // },
    // deleteViolation(id) {
    //   this.$confirm('此操作将删除该违规记录, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.axios.delete(`http://139.9.77.245:8081/violation-records/${id}`).then(res => {
    //       if (res.data.code === 0) {
    //         this.getViolationRecordsList()
    //         this.$message.success('删除成功')
    //       }
    //       if (res.data.code === 1) {
    //         this.$message.error('删除失败')
    //       }
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     })
    //   })
    // },
    // cancel() {
    //   this.dialogFormVisible = false
    //   this.addForm = {
    //     id: '',
    //     name: '',
    //     entryDate: '',
    //     gender: '',
    //     phone: '',
    //     department: '',
    //     post: ''
    //   }
    // },
    changeStatus(id, status) {
      this.$confirm('是否修改状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.put(`http://139.9.77.245:8081/violation-records/${id}`, status === 1 ? 0 : 1, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          if (res.data.code === 0) {
            this.getViolationRecordsList()
            this.$message.success('修改成功!')
          }
          if (res.data.code === 1) {
            this.$message.error('修改失败!')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    }
  }
}
</script>

<style scoped>
.back{
  padding: 10px 15px;
  width: 100%;
  height: 100%;
  background-color: #eee;
}
.header{
  padding: 10px 10px 10px 10px;
  border-radius: 10px;
  background-color: #fff;
}
.table {
    margin-top: 15px;
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    background-color: #fff;
}
.add {
  text-align: center;
  width: 100%;
}
.check {
  color: black;
  font-size: large;
  margin: 15px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
